<template>
    <div  class="p16 flex-column-null-between container" style="width: 98%;">
       <el-row>
            <el-col :span="4">
                <div class="grid-content bg-purple" style="">
                    <div slot="header" style="border-bottom:1px solid #e1e4e7" class="top-from">项目系统
                        <el-button style="margin-left: 20px" type="success" size="mini" icon="el-icon-refresh"  @click="refreshSystem"></el-button>
                    </div>

                   <!--div设置可滚动-->
                    <div style="margin-top:20px;overflow: auto;height: calc(100vh - 270px)">
                        <el-tree

                            v-loading="loading"
                            :data="systemData"
                            :props="defaultProps"
                            highlight-current
                            @node-click="handleNodeClick">
                            
                        </el-tree>
                    </div>
                    
                </div>
            </el-col>

            <el-col :span="19" style="margin-left:5px">
               
                <div class="grid-content bg-purple-light"  @click="OptionCardClose">
                    <div slot="header" class="top-from">
                        <div class="search-item">
                            <el-input
                                    size="small"
                                    v-model="resourceFilter"
                                    class="input-width clear-input"
                                    suffix-icon="el-icon-search"
                                    clearable
                                    placeholder="请输入查询内容"
                            ></el-input>
                        </div>
                        <div class="search-item">
                            <el-button type="primary" size="small"  @click="selectResource">搜索</el-button>
                        </div>
                    </div>
                     
                    <div style="margin-top:10px;overflow: auto;height: calc(100vh - 240px)">
                        <el-tree 
                            class="filter-tree"
                            :default-expanded-keys="expandedKeys"
                            :default-expand-all="expandAll"
                            ref="tree"
                            node-key="resourceCode"
                            :filter-node-method="filterNode"
                            v-loading="loading"
                            :data="resourceData" 
                            :props="resourceProps"
                            highlight-current
                            :expand-on-click-node="resourceExpandOnClickNode"
                            @node-click="resourceHandleNodeClick"
                            @node-contextmenu="contextMenu">
                            <span class="custom-tree-node" slot-scope="{data}">
                                        <span>
                                           
                                            {{ data.resourceName }}
                                             <i :class="data.icon" style="margin-right: 10px"></i>
                                            <span style="margin-left:50px;font-size:10px;color:lightgray"> {{ $dicVal(data.resourceType) }}</span>
                                        </span>
                            </span>
                        </el-tree>
                    </div>
                   
                    <div class="right-menu" :style="{'z-index':999,'position':'fixed',left:leftNumber + 'px',
                            top: topNumber + 'px',
                            width:'80px',
                            background:'white','box-shadow':'0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04)'}" 
                            v-show="optionCardShow"
                            id="option-button-group">
                        <el-button @click="resourceAdd" class="option-card-button">添加</el-button>
                        <el-button @click="resourceChange" class="option-card-button">修改</el-button>
                        <el-button @click="resourceRemove" class="option-card-button">删除</el-button>
                    </div>
                    
                    
                    
                    <!-- 添加资源 -->
                    <addResource ref="addResource" @success="addResource"/>
                    <!-- 编辑资源 -->
                    <editResource ref="editResource" @success="changeResource"/>
                </div>
            </el-col>
       </el-row>
    </div>
</template>

<script>
    import editResource  from "./components/EditResource";
    import addResource  from "./components/AddResource";
    import {queryAllSystem,queryResource,removeResource,queryByResourceId} from '@/api/resource';
    import {replaceNodeById} from '@/utils/TreeUtils';
    export default {
        components: {
            editResource,
            addResource,
        },
        data() {
           return {
                resourceExpandOnClickNode:false,
                optionCardShow:false,
                topNumber:0,
                leftNumber:0,
                systemData:[],
                loading:"",
                defaultProps:{
                    children: 'child',
                    label: 'systemName',
                },
                expandAll:true,
                nowSystem:{},

                expandedKeys:[],
                resourceFilter:"",
                resourceData:[],
                resourceProps:{
                    children: 'children',
                    label: 'resourceName'
                },
                nowResource:{},
                parentResource:{},
                expandedSource:{}

           }
        },
        watch:{
            resourceFilter(val){
                this.$refs.tree.filter(val);
            }
        },
        created(){
           this.querySystem();
        },
        methods:{
            async querySystem(){
                let res = await queryAllSystem();
                this.systemData = res.data;
                if(this.systemData.length > 0){
                    this.nowSystem = this.systemData[0];
                }
            },
            //查询系统资源
            async querySysResource(){
                let res = await queryResource({systemCode:this.nowSystem.systemCode});
                let data = res.data;
                this.resourceData = [data];
                if(this.expandedSource.resourceCode != null){
                     this.expandedKeys = [this.expandedSource.resourceCode]
                }

            },
            changeResource(resource){
              //通过id children 递归查询然后替换
              // replaceNodeById(this.resourceData,resource.id,resource)
            },
            addResource(parent,add){
              if(parent.children == null){
                parent.children = [];
              }
              parent.children.push(add);
            },
            //手动搜索资源
            selectResource(){

            },
            //添加类别
            addSystem(){
               
            },
            refreshSystem(){
                this.loading = true;
                this.querySystem();
                this.loading = false;
            },
            handleNodeClick(system){
                if(system == null){
                    return;
                }
                this.loading = true;
                this.nowSystem = system;
                this.querySysResource();
                this.loading = false;
            },
            //点击资源
            resourceHandleNodeClick(resource){

            },
            async contextMenu(event,data){
                this.optionCardShow = false
                this.nowResource = data;
                this.expandedSource = data;

                let screenHeight = window.innerHeight;
                let nowY = event.pageY + 20;
                if(nowY > screenHeight - 80){
                   this.topNumber = nowY - 100;
                }else{
                   this.topNumber = nowY;
                }

                this.leftNumber = event.pageX;
                if(data.parentResourceId != null){
                    let res = await queryByResourceId({resourceId:data.parentResourceId})
                    this.parentResource = res.data;
                }
                this.optionCardShow = true;
            },
            OptionCardClose(){
                var currentCli = document.getElementById("option-button-group");
                if (currentCli) {
                    if (!currentCli.contains(event.target)) { 
                        //点击到了id为option-button-group以外的区域，就隐藏菜单
                        this.optionCardShow = false;
                    }
                }
            },
            filterNode(value,data){
                if(!value){
                    return true;
                }
                return data.resourceName.indexOf(value) !== -1;
            },
            resourceAdd(){
                this.$refs["addResource"].showDialog(this.nowResource);
                this.optionCardShow = false;
            },
            resourceChange(){
                this.$refs["editResource"].showDialog(this.nowResource);
                this.optionCardShow = false;
            },
            resourceRemove(){
                this.optionCardShow = false;
                if(this.nowResource.resourceId == null){
                    this.$message.warning("当前选项不可删除");
                    return;
                }
                this.$confirm('您是否要删除该资源?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let res = await removeResource({resourceId:this.nowResource.resourceId});
                    this.expandedSource = this.parentResource;
                    this.querySysResource();
                }).catch(() => {
                });
            }
        }

    }

</script>

<style src="../css/index.scss" lang="scss"></style>
<style  lang="scss" scoped>
  .search-item{
        float: left;
        margin: 0 20px 20px 0;
        span{
            color: #606266;
            font-size: 14px;
            margin-right: 0px;
        }
    }
 .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    /* background: #d3dce6; */
  }
  .bg-purple-light {
    /* background: #e5e9f2; */
  }
  .top-from{
      height: 50px;
  }
  .grid-content {
    border: 1px solid #e1e4e7;
    border-radius: 4px;
    background: #fff;
    height: calc(100vh - 160px);
    overflow: auto;
    padding-top: 15px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
   .option-card-button {
        width: 100%;
        margin-left: 0;
        font-size: 12px;
        border-radius: 0;
    }
</style>